<template>
  <div>
    <div v-if="showMe">
      <Backbar title="我的订桌"></Backbar>
      <div style="height: 1rem"></div>
      <div class="order_box" >
        <div class="mui-card" id="store_div" v-for="item in store" :key="item.id">
          <!--页眉，放置标题-->
          <div class="mui-card-header" style="font-size: .6rem;padding: .5rem .5rem .5rem .5rem">{{item.store_name}}</div>
          <!--内容区-->
          <div class="mui-card-content" style="height:auto;width:100%;"><img :src="'data:image/png;base64,'+item.store_image_icon" style="height:100%;width:100%;"/></div>
          <!--页脚，放置补充信息或支持的操作-->
          <div class="mui-card-footer" >
            <div class="mui-media-body" style="text-align: left;">
              <p style="font-size: .4rem;padding: .1rem .1rem .1rem .1rem">姓名: {{item.name}}</p>
              <p style="font-size: .4rem;padding: .1rem .1rem .1rem .1rem;line-height:.5rem;">时间：{{item.table_time}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Backbar from './small_components/Back_bar';
  export default {
    name: 'mybooking',
    data () {
      return {
        showMe: true,
        store: []
      };
    },
    components: {
      Backbar
    },
    created () {
      this.$store.dispatch('setLoading', false);
      this.global.whichPage = 'mybooking';
      this.$store.dispatch('setLoading', true);
      this.$http
        .post(
          this.global.url + 'pos/read_pos_booktable?shou_id=' + this.global.imei + '&pos_user_id=' + this.global.userid,
          {},
        {
          emulateJSON: true,
          header: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        )
        .then(
          response => {
            response = response.data;
            this.store = response.read_pos_booktable;
            this.$store.dispatch('setLoading', false);
          },
          response => {
            // error callback
            console.log(response);
          }
        );
    }
  };
</script>

<style lang="less">
.order_box{
  .mui-card{
    margin: 0.2rem;
  }
}
</style>
